<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<head>
	<link rel="stylesheet" href="${ctxStatic}/kitadmin/css/global.css" media="all">
	<link rel="stylesheet" href="${ctxStatic}/kitadmin/plugins/font-awesome/css/font-awesome.min.css">
</head>

<body>
	<div style="margin: 15px;">
		<blockquote class="layui-elem-quote">
			<h1>Navbar 组件 (动态渲染)</h1></blockquote>
		<fieldset class="layui-elem-field">
			<legend>演示</legend>
			<div class="layui-field-box">
				<div id="nav" lay-filter="demo"></div>
				<pre class="layui-code">
					//示例代码
					//html
					&lt;div id=&quot;nav&quot; lay-filter=&quot;demo&quot;&gt;&lt;/div&gt;
					//js
					layui.config({
						base: 'js/'
					}).use('navbar', function() {
						var navbar = layui.navbar();
						navbar.set({
							elem: '#nav',
							url: 'datas/nav.json'
						});
						navbar.render();
						navbar.on('click(demo)', function(data) {
							layui.layer.msg(data.field.href);
						});
					});
					</pre>
			</div>
		</fieldset>
		<fieldset class="layui-elem-field">
			<legend>参数</legend>
			<div class="layui-field-box">
				<table class="layui-table">
					<thead>
						<tr>
							<th>属性名称</th>
							<th>类型</th>
							<th>默认值</th>
							<th>描述</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td style="text-align: center;">elem</td>
							<td style="text-align: center;">string/object</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>存在组件的容器，支持类名、ID名 和Jquery对象.</p>
								<p>举个栗子：</p>
								<p>1. elem:'.nav'</p>
								<p>2. elem:'#nav'</p>
								<p>3. elem:$('.nav')</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">data</td>
							<td style="text-align: center;">object</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>提供给组件的数据列表，请严格按照规定格式提供。</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">url</td>
							<td style="text-align: center;">string</td>
							<td style="text-align: center;">undefined</td>
							<td>
								<p>提供数据源远程的URL,当前只支持同步的方式读取数据</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">type</td>
							<td style="text-align: center;">string</td>
							<td style="text-align: center;">GET</td>
							<td>
								<p>请求的方式，可选参数：GET、POST</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">cached</td>
							<td style="text-align: center;">bool</td>
							<td style="text-align: center;">false</td>
							<td>
								<p>是否启用缓存，如果设置为true，则将初始化数据的数据添加至缓存</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">spreadOne</td>
							<td style="text-align: center;">bool</td>
							<td style="text-align: center;">false</td>
							<td>
								<p>设置是否只展开一个二级菜单</p>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</fieldset>
		<fieldset class="layui-elem-field" id="event">
			<legend>Event 事件</legend>
			<div class="layui-field-box">
				<p>语法：navbar.on('event(过滤器值)', callback);</p>
				<table class="layui-table">
					<thead>
						<tr>
							<th>事件</th>
							<th>描述</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>click</td>
							<td>Navbar点击事件,元素被点击后会触发</td>
						</tr>
					</tbody>
				</table>
				<p>举个栗子：</p>
				<p>
					<pre class="layui-code">
					navbar.on('click(side)', function(data) {
						//Do something...
						//data参数说明
						//包含两个属性：data.elem 和 data.field
						//data.elem 是点击的a标签dom对象
						//data.field 包含三个属性
						//1、data.field.href  设置的连接地址
						//2、data.field.icon  设置的图标
						//3、data.field.title 设置的标题
					 console.log(data.elem);
					 console.log(data.field.title);
					 console.log(data.field.icon);
					 console.log(data.field.href);
					});
					</pre>
				</p>
			</div>
		</fieldset>
		<fieldset class="layui-elem-field">
			<legend>方法</legend>
			<div class="layui-field-box">
				<table class="layui-table">
					<thead>
						<tr>
							<th>名称</th>
							<th>参数说明</th>
							<th>描述</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td style="text-align: center;">set</td>
							<td style="text-align: center;">
								<p>参数名：options</p>
								<p>类型：object</p>
								<p>属性类型：参考属性说明</p>
							</td>
							<td>
								如果组件在初始化时没有设置参数，那么该方法必须在调用render方法前调用
								<p>举个栗子：</p>
								<p>
									<pre class="layui-code">
									//栗子一
									layui.config({
										base:'js/'
									}).use('navbar',function(){
										var navbar = layui.navbar({
											elem: '#nav',
											url: 'datas/nav.json'
										});
										//这是调用navbar组件初始化的情况，如果设置了参数，那么可以直接使用render方法渲染
										navbar.render();
										//Do something...
									});
									//栗子二
									layui.config({
										base:'js/'
									}).use('navbar',function(){
										var navbar = layui.navbar();
										//navbar组件没有被初始化的情况，需要调用set方法设置一些参数
										navbar.set({
											elem: '#nav',
											url: 'datas/nav.json'
										});
										navbar.render();
										//Do something...
									});
									</pre>
								</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">render</td>
							<td style="text-align: center;">
								无
							</td>
							<td>
								<p>渲染出navbar导航栏</p>
								<p>
									<pre class="layui-code">
									//调用之前需要设置一些参数，参考set的方法说明
									navbar.render();
									</pre>
								</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">cleanCached</td>
							<td style="text-align: center;">
								无
							</td>
							<td>
								<p>清除缓存</p>
								<p>
									<pre class="layui-code">
									//清除缓存方式的其中一种，还有一种是将参数cached设置为false，也会自动清除缓存
									//栗子
									navbar.cleanCached();
									</pre>
								</p>
							</td>
						</tr>
						<tr>
							<td style="text-align: center;">on</td>
							<td style="text-align: center;">
								<p>参数一：events --- 说明：事件名 -- 类型：String</p>
								<p>参数二：callback --- 说明：架设函数 -- 类型：Function</p>
							</td>
							<td>
								<p>调用此方法绑定事件，具体栗子请参考
									<a href="#event">事件</a>文档</p>
								<p>
									<pre class="layui-code">语法：navbar.on('event(过滤器值)', callback);</pre>
								</p>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</fieldset>
		<fieldset class="layui-elem-field">
			<legend>数据结构</legend>
			<div class="layui-field-box">
				<p>请严格按照以下数据结构设置数据</p>
				<pre class="layui-code">
					//数据结构
					[
						{
							"title": "这是动态渲染的", //标题
							"icon": "&#x1002;",       //图标，支持layui-icon 和 font-awesome
							"href": "",               //跳转的地址，如果有字节点，该地址将无效
							"spread":true,            //默认展开
							"children": [             //子项
								{
									"title": "表单",
									"icon": "&#xe62a;",
									"href": "form.html"
								}
								//...
							]
						}, {
							"title": "地址本",
							"icon": "fa-address-book",
							"href": "",
							"spread":false,
							"children": [
								{
									"title": "Github",
									"icon": "fa-github",
									"href": "https://www.github.com/"
								},
								{
									"title": "QQ",
									"icon": "fa-qq",
									"href": "http://www.qq.com/"
								},
								{
									"title": "Fly社区",
									"icon": "&#xe609;",
									"href": "http://fly.layui.com/"
								}
								//...
							]
						}, {
							"title": "33333",
							"icon": "",
							"href": "",
							"spread":false
						}
					]
			</pre>
			</div>
		</fieldset>
	</div>
	<script type="text/javascript" src="${ctxStatic}/kitadmin/plugins/layui/layui.js"></script>
	<script>
		layui.config({
            base: '${ctxStatic}/kitadmin/js/',
		}).use(['navbar', 'code'], function() {
			var navbar = layui.navbar(),
				layer = parent.layer === undefined ? layui.layer : parent.layer,
				$ = layui.jquery;
			layui.code();
			navbar.set({
				elem: '#nav',
				url: '${ctxStatic}/kitadmin/datas/nav.json',
				cached: true
			});
			navbar.render();
			navbar.on('click(demo)', function(data) {
				console.log(data.elem);
				console.log(data.field.title);
				console.log(data.field.icon);
				console.log(data.field.href);
				layer.msg(data.field.href);
			});
		});
	</script>
</body>

